<script setup lang="ts">
import { ref } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import ReCol from "@/components/ReCol";
import UploadImg from "@/components/UploadImg/index.vue";
import { usePublicHooks } from "@/views/hooks";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { message } from "@/utils/message";
import Refresh from "~icons/ep/refresh";
const { switchStyle, parkadeChargeTypeMap, parkadeTypeMap } = usePublicHooks();
import { useWebSocket } from "@/hooks/useWebSocket";
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: null,
    name: "",
    parkingType: null,
    totalCapacity: 1,
    chargeRules: "",
    chargeType: null,
    longitude: null,
    latitude: null,
    // gaodelot: row?.gaodelot || "",
    // gaodelat: row?.gaodelat || "",
    config: "",
    description: "",
    address: "",
    coverImageUrl: "",
    sortCode: 1,
    isEnabled: true
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}
function handleChangePhoto(file, key) {
  console.log("handleChangePhoto", file);
  newFormInline.value[key] = file;
}

// 初始化WebSocket钩子
// const { connect, disconnect, sendMessage, isConnected } = useWebSocket({
//   url: () => {
//     // 根据当前环境动态生成WebSocket URL
//     const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
//     const host = window.location.host;
//     return `${protocol}//${host}/api/parking/real-time-data`;
//   },
//   onMessage: event => {
//     try {
//       const data = JSON.parse(event.data);
//       // 处理停车场实时数据
//       handleParkingData(data);
//     } catch (error) {
//       message(`WebSocket消息解析失败`, { type: "error" });
//       console.error("消息解析错误:", error);
//     }
//   }
// });
// // 处理停车场数据
// const handleParkingData = (data: any) => {
//   message(`收到实时数据: ${data.parkingName} 车位更新`, { type: "success" });
// };

// 按钮点击事件
// const handleGetData = () => {
//   if (!isConnected.value) {
//     connect();
//   } else {
//     // 发送数据请求命令
//     sendMessage(
//       JSON.stringify({
//         action: "fetch-latest-data",
//         parkingId: newFormInline.value.id
//       })
//     ).catch(error => {
//       message(
//         `发送失败: ${error instanceof Error ? error.message : String(error)}`,
//         { type: "error" }
//       );
//     });
//   }
// };
defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-position="left"
    label-width="95px"
  >
    <el-row :gutter="30">
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="停车场名称" prop="name">
          <el-input
            v-model="newFormInline.name"
            clearable
            placeholder="请输入停车场名称"
          />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="停车场地址" prop="address">
          <el-input
            v-model="newFormInline.address"
            clearable
            placeholder="请输入停车场地址"
          /> </el-form-item
      ></re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="停车场经度" prop="longitude">
          <el-input
            v-model="newFormInline.longitude"
            clearable
            placeholder="请输入停车场经度"
          />
        </el-form-item>
        <el-form-item label="停车场维度" prop="latitude">
          <el-input
            v-model="newFormInline.latitude"
            clearable
            placeholder="请输入停车场维度"
          />
        </el-form-item>
        <el-form-item label="车位数">
          <el-input-number
            v-model="newFormInline.totalCapacity"
            style="width: 100%"
            :min="1"
            :max="9999"
            class="left-aligned-input"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
            v-model="newFormInline.sortCode"
            style="width: 100%"
            :min="1"
            :max="9999"
            class="left-aligned-input"
            controls-position="right"
          />
        </el-form-item>
        <!-- <el-form-item label="高德经度" prop="gaodelot">
          <el-input
            v-model="newFormInline.gaodelot"
            clearable
            placeholder="请输入高德经度"
          />
        </el-form-item>
        <el-form-item label="高德维度" prop="gaodelat">
          <el-input
            v-model="newFormInline.gaodelat"
            clearable
            placeholder="请输入高德维度"
          />
        </el-form-item> -->
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="停车场照片" label-position="top">
          <div class="flex flex-col">
            <UploadImg
              v-model:model-value="newFormInline.coverImageUrl"
              :width="330"
              @change="handleChangePhoto($event, 'coverImageUrl')"
            />
          </div>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="有效状态" prop="isEnabled">
          <el-select v-model="newFormInline.isEnabled" placeholder="请选择状态">
            <el-option label="允许" :value="true" />
            <el-option label="禁止" :value="false" />
          </el-select> </el-form-item
      ></re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="停车场类型 ">
          <el-select
            v-model="newFormInline.parkingType"
            placeholder="请选择停车场类型 "
            class="w-full"
            clearable
          >
            <el-option
              v-for="(item, index) in parkadeTypeMap"
              :key="index"
              :label="item.text"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col v-if="false" :value="12" :xs="24" :sm="24">
        <el-form-item label="收费类型 ">
          <el-select
            v-model="newFormInline.chargeType"
            placeholder="请选择收费类型 "
            class="w-full"
            clearable
          >
            <el-option
              v-for="(item, index) in parkadeChargeTypeMap"
              :key="index"
              :label="item.text"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </re-col>
      <!-- <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="是否在线">
          <div class="flex justify-between w-full">
            <div class="mr-2">请获取</div>
            <el-button
              link
              type="primary"
              :icon="useRenderIcon(Refresh)"
              @click="handleGetData"
            >
              获取
            </el-button>
          </div>
        </el-form-item>
      </re-col> -->
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="收费规则" label-position="top">
          <el-input
            v-model="newFormInline.chargeRules"
            :rows="4"
            placeholder="请输入收费规则"
            type="textarea"
          /> </el-form-item
      ></re-col>
      <re-col v-if="false" :value="24" :xs="24" :sm="24">
        <el-form-item label="配置" label-position="top">
          <el-input
            v-model="newFormInline.config"
            :rows="4"
            placeholder="请输入配置"
            type="textarea"
          />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="描述" label-position="top">
          <el-input
            v-model="newFormInline.description"
            :rows="4"
            placeholder="请输入描述"
            type="textarea"
          /> </el-form-item
      ></re-col>
    </el-row>
  </el-form>
</template>
